* {
    box-sizing: border-box;
}
body {
    #content-2 {
        width: 100%;
        height: 100%;
    }
    .deviceMap {
        //position: absolute;
        //top: 50%;
        //left: 50%;
        //width: 1024px;
        //height: 640px;
        //background: #808080;
        //margin-top: -320px;
        //margin-left: -512px;
        width: 100%;
        height: 100%;
        position: relative;
    }
    .mapSvg {
        //background: red;
        path.selected{
            fill: #82e3ff !important;
            fill-opacity: 1 !important;
        }
    }
    .content_right {
        position: absolute;
        top: 0;
        right: 20px;
        bottom: 0;
        width: 35%;
        // background: red;
        .device_back {
            padding: 6% 0 11% 0;
            height: 50%;
            &.detail_container {
                padding: 10% 0 8% 0;
            }
            .device_detail {
                height: 100%;
                background: url("../img/device_bg1.png") no-repeat;
                background-size: 100% 100%;
                color: #70DAFD;
                font-weight: 600;
                .device_detail_title {
                    font-size: 18px;
                    text-align: center;
                    padding-top: 20px;
                }
                .device_detail_content {
                    padding-top: 10px;
                    margin-bottom: 20px;
                    padding-left: 4%;
                    padding-right: 4%;
                    overflow: hidden;
                    overflow-y: auto;
                    font-weight: 100;
                    font-size: 14px;
                    line-height: 28px;
                    text-indent: 2em;
                    height: calc(100% - 65px);
                }
            }
            .device_spread {
                height: 100%;
                background: url("../img/device_bg2.png") no-repeat;
                background-size: 100% 100%;
                position: relative;
                .left_circle{
                    position: absolute;
                    top: -26px;
                    left: -29px;
                    width: 59px;
                    height: 59px;
                    background: url("../img/left_circle.png") no-repeat;
                    background-size: cover;
                    z-index: 99;
                    -webkit-animation: rotateCircle 4s linear infinite;
                }
                .spread_title {
                    width: 173px;
                    height: 24px;
                    background: url("../img/title_top.png") no-repeat;
                    background-size: cover;
                    position: absolute;
                    top: -18px;
                    left: 50%;
                    margin-left: -86px;
                    text-align: center;
                    line-height: 24px;
                    font-size: 14px;
                    color: #4A75A0;
                }
                .spread_container {
                    width: 100%;
                    height: 100%;
                    .spread_content {
                        width: 100%;
                        height: calc(100% - 35px);
                        position: relative;
                        white-space: nowrap;
                        overflow: hidden;
                        font-size: 0;
                        .slide_content {
                            width: 100%;
                            height: 100%;
                            display: inline-block;
                            vertical-align: middle;
                            transform: translateX(0%);
                            transition: transform 1s;
                            .brand_title {
                                font-size: 14px;
                                text-align: center;
                                color: #70DAFD;
                                width: 100%;
                                height: 30px;
                                line-height: 30px;
                                margin-top: 15px;
                            }
                            .brand_radar {
                                height: calc(100% - 45px);
                                .lines line {
                                    fill: white;
                                    fill-opacity: 0.5;
                                    stroke: rgba(112,218,253, 0.2);
                                }
                                text {
                                    font-size: 12px;
                                }
                            }
                            .bar-chart {
                                margin-top: 15px;
                                .name {
                                    padding: 0;
                                    height: 30px;
                                }
                            }
                        }
                    }
                    .spread_lend {
                        height: 35px;
                        width: 100%;
                        text-align: center;
                        line-height: 25px;
                        .lend_dot {
                            display: inline-block;
                            vertical-align: middle;
                            margin-right: 5px;
                            background: #6EDDFF;
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            cursor: pointer;
                            transition: width 0.2s;
                            &.active {
                                width: 20px;
                                border-radius: 6px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@keyframes rotateCircle{
    0%{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50%{
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

::-webkit-scrollbar
{
    width: 16px;
    height: 16px;
    //background-color: #F5F5F5;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 5px solid transparent;
}

::-webkit-scrollbar-thumb
{
    min-height: 20px;
    background-clip: content-box;
    -webkit-box-shadow: inset 0 0 5px rgba(30,170,236,.3);
    background-color: #70dafd;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
